/***F1相关样式***/
.f1 > .container {
	display: flex;
	/* 弹性项目在交叉轴上的对齐—左中右 */
	align-items: center;
}
.f1 > .container > .center {
	flex: 1;
}
.search {
	display: flex;
}
.menu {
	display: flex;
	/* 弹性项目在交叉轴上的对齐—九个li */
	align-items: center;
}
.menu > li:nth-child(2n){
	padding: 0 8px;
}
/***F2相关样式***/
.nav {
	display: flex;
	/* 弹性项目在主轴上的对齐方式 */
	/* justify-content: space-between; */
}
.nav > li:not(:first-child) {
	padding: 6px  15px;
}
.nav > li:first-child {
	padding: 6px 15px 6px 0;
}
/***F3相关样式***/
/***F4相关样式***/
.f4 > .container {
	display: flex;
	/* 容器内部的项目交叉轴方向上顶部对齐，而不是默认的拉伸对齐 */
	align-items: flex-start;
}
.f4 > .container > .left {
	/* 左侧宽度有增长权重 */
	flex: 1;
}
.f4 > .container > .right {
	/* 右侧宽度固定，指定主轴上的基础尺寸即可 */
	flex-basis: 230px;
	margin-left: 10px;
}
.list {
	display: flex;
	/* 弹性容器是否允许换行 */
	flex-wrap: wrap;
}
.product {
	/* 宽度 / 主轴上的基础尺寸 */
	flex-basis: 33.33333%;
	padding: 4px;
}
.product > div {
	border: 1px solid #f00;
}
.pager {
	display: flex;
	/* 项目在主轴上的对齐方式：终点对齐 */
	justify-content: flex-end;
}
.cart {
	/* 不随页面内容而滚动——固定定位 */
	position: fixed;
	/* 只指定到屏幕顶部距离，不指定左右距离 */
	top: 200px;
}
/***F5相关样式***/
.f5 > .container {
	display: flex;
}
.item {
	/* 容器中的空白均分给四个项目 */
	flex: 1;
	text-align: center;
}
/***F6相关样式***/
